<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item >销售合同</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/shopreturns'}">销售退货</el-breadcrumb-item>

  </el-breadcrumb>
  <el-card >

  <el-row :gutter="20">
      <el-col :span="4"><el-input placeholder="请输入查询号码" v-model="queryinfo.search"  clearable @clear="getUserList">
        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
  </el-input></el-col>
  <el-select v-model="lookname"  clearable placeholder="审核人" style="width: 120px; margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.auditor"
      :value="item.auditor">
    </el-option>
  </el-select>
  <el-select v-model="applyname"  clearable placeholder="申请人" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.applyname"
      :value="item.applyname">
    </el-option>
  </el-select>
  <el-select v-model="username"  clearable placeholder="客户名称" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
  <el-select v-model="songtype"  clearable placeholder="送货方式" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
  <el-select v-model="applystate"  clearable placeholder="申请状态" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
  <el-select v-model="lookstate"  clearable placeholder="审核状态" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
  </el-row>
  <div class="block" style="margin-top: 10px;">

  <el-date-picker
    v-model="data1"
    type="daterange"
    range-separator="至"
    start-placeholder="交货开始日期"
    end-placeholder="交货结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-date-picker
    v-model="data2"
    type="daterange"
    range-separator="至"
    start-placeholder="签订开始日期"
    end-placeholder="签订结束日期"
    style="margin-right: 10px; margin-bottom: 10px;">
  </el-date-picker>

  <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>

  <el-button type="warning" @click="add">新建</el-button>
  <el-button type="danger" >删除指定</el-button>
</div>
<div>
  <el-date-picker
    v-model="data3"
    type="daterange"
    range-separator="至"
    start-placeholder="申请开始日期"
    end-placeholder="申请结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-date-picker
    v-model="data4"
    type="daterange"
    range-separator="至"
    start-placeholder="审核开始日期"
    end-placeholder="审核结束日期">
  </el-date-picker>
</div>
  <template>
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
          type="index"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
         prop="id"
label="编号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="contract"
          label="合同编号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shopid"
          label="订单编号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="phonename"
          label="联系人"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phonetype"
          label="联系方式"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="money"
          label="金额合计"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="delivery"
          label="交货日期"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applyname"
          label="申请人"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applydata"
          label="申请时间"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applystate"
          label="申请状态"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="auditor"
          label="审核人"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="auditordata"
          label="审核时间"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
        prop="auditorstate"
          label="审核状态"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          width="130%"
          align="center">
          <template v-slot="scope">

              <el-tooltip  effect="dark" content="修改" placement="top">
                  <el-button type="warning" icon="el-icon-edit-outline" size="12px" circle @click="detail"></el-button>
      </el-tooltip>
      <el-tooltip  effect="dark" content="删除" placement="top">
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
      </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[1, 2, 3, 5,8,10]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px;">
      </el-pagination>

    </div>
  </el-card>

<el-dialog
  title="修改销售合同"
  :visible.sync="putusers"
  width="50%"

 >
  <span class="opinion">
    <el-form :inline="true" >
      <el-form-item >
    <template>
  <el-select v-model="value" placeholder="送货方式" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<el-input placeholder="订单编号" v-model="search" style="width: 200px;"></el-input>
        <el-input placeholder="备注" style="width: 200px; margin-left: 10px;"></el-input>
        <el-button type="warning" style="margin-left: 10px;" @click="Shoporder">选择</el-button>

  <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
        <div class="block">
    <el-date-picker
      v-model="data"
      type="date"
      placeholder="签订日期" style="margin-top: 10px;   margin-right: 10px;">
    </el-date-picker>
    <el-select v-model="phonename" placeholder="联系人" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.phonename"
      :value="item.id">
    </el-option>
  </el-select>
    <el-input placeholder="收货地址" style="width: 200px;" v-model="address"></el-input>
    <el-input placeholder="联系方式" style="width: 200px;  margin-left: 10px;" v-model="phonetype"></el-input>

  </div>

  </el-form-item>

    </el-form>
    <span>
      <template >
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
          type="index"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
         prop="id"
label="序号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shop"
          label="产品"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="ordersum"
          label="订货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shopmoney"
          label="金额"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200%"
          align="center">
          <template v-slot="scope">

              <el-tooltip  effect="dark" content="选择" placement="top">
                  <el-button type="warning" icon="el-icon-position" size="12px" circle @click="File"></el-button>
      </el-tooltip>
      <el-tooltip  effect="dark" content="添加" placement="top">
          <el-button type="primary" icon="el-icon-circle-plus" circle ></el-button>
      </el-tooltip>
      <el-tooltip  effect="dark" content="删除" placement="top">
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
      </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

    <div class="block">

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryinfo.pagenum"
  :page-sizes="[1, 2, 3, 5,8,10]"
  :page-size="queryinfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  style="margin-top: 20px;">
</el-pagination>

</div>  </template>
    </span>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="putusers = false">取 消</el-button>
    <el-button type="primary" @click="Putcontract">提交</el-button>
  </span>
</el-dialog>
<el-dialog
  title="添加销售合同"
  :visible.sync="addcontract"
  width="50%"

 >
  <span class="opinion">
    <el-form :inline="true" >
      <el-form-item >
    <template>
  <el-select v-model="value"  placeholder="送货方式" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<el-input placeholder="订单编号" v-model="search" style="width: 200px;"></el-input>
        <el-input placeholder="备注" style="width: 200px; margin-left: 10px;"></el-input>
        <el-button type="warning" style="margin-left: 10px;" @click="Shoporder">选择</el-button>

  <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
        <div class="block">
    <el-date-picker
      v-model="data"
      type="date"
      placeholder="签订日期" style="margin-top: 10px;   margin-right: 10px;">
    </el-date-picker>
    <el-select v-model="phonename" placeholder="联系人" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.phonename"
      :value="item.id">
    </el-option>
  </el-select>
    <el-input placeholder="收货地址" style="width: 200px;" v-model="address"></el-input>
    <el-input placeholder="联系方式" style="width: 200px;  margin-left: 10px;" v-model="phonetype"></el-input>

  </div>

  </el-form-item>

    </el-form>
    <span>
      <template >
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
          type="index"
          label="#"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
         prop="id"
label="序号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shop"
          label="产品"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="ordersum"
          label="订货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shopmoney"
          label="金额"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200%"
          align="center">
          <template v-slot="scope">

              <el-tooltip  effect="dark" content="选择" placement="top">
                  <el-button type="warning" icon="el-icon-position" size="12px" circle @click="File"></el-button>
      </el-tooltip>
      <el-tooltip  effect="dark" content="添加" placement="top">
          <el-button type="primary" icon="el-icon-circle-plus" circle ></el-button>
      </el-tooltip>
      <el-tooltip  effect="dark" content="删除" placement="top">
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
      </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

    <div class="block">

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryinfo.pagenum"
  :page-sizes="[1, 2, 3, 5,8,10]"
  :page-size="queryinfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  style="margin-top: 20px;">
</el-pagination>

</div>  </template>
    </span>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addcontract = false">取 消</el-button>
    <el-button type="primary" @click="Addcontract">提交</el-button>
  </span>
</el-dialog>
<el-dialog
  title="选择销售订单"
  :visible.sync="shoporder"
  width="50%"

 >
  <span class="opinion">
    <el-form :inline="true" >
      <el-form-item >
    <template>
      <el-input placeholder="订单编号" v-model="search" style="width: 200px; margin-right: 10px;"></el-input>
  <el-select v-model="value" placeholder="送货方式" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-select v-model="phonename" placeholder="客户名称" style="width: 120px; ">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.name"
      :value="item.id"

      >
    </el-option>

  </el-select>

  <el-button type="primary" icon="el-icon-refresh" @click="refresh" style="margin-left: 10px;"></el-button>
  <el-button  icon="el-icon-search" ></el-button>
</template>

  </el-form-item>

    </el-form>
    <span>
      <template >
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
        prop="id"

        label="编号"
        width="80%"
        align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shopid"
          label="订单编号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="money"
          label="金额合计"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="delivery"
          label="交货日期"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200%"
          align="center">
          <template v-slot="scope">

              <el-tooltip  effect="dark" content="选择" placement="top" >
                  <el-button type="warning" icon="el-icon-thumb" size="12px" circle @click="choose(scope.row.id)"></el-button>
      </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

    <div class="block">

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryinfo.pagenum"
  :page-sizes="[1, 2, 3, 5,8,10]"
  :page-size="queryinfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  style="margin-top: 20px;">
</el-pagination>

</div>  </template>
    </span>
  </span>
</el-dialog>
<el-dialog
  title="选择物料档案"
  :visible.sync="file"
  width="50%"

 >
  <span class="opinion">
    <el-form :inline="true" >
      <el-form-item >
    <template>
      <el-input placeholder="订单编号" style="width: 200px; margin-right: 10px;"></el-input>
  <el-select v-model="value" placeholder="送货方式" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-select v-model="phonename" placeholder="客户名称" style="width: 120px; ">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.name"
      :value="item.id"

      >
    </el-option>

  </el-select>
  <el-button type="primary" icon="el-icon-refresh"  style="margin-left: 10px;"></el-button>
</template>

  </el-form-item>

    </el-form>
    <span>

      <template >
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
        prop="id"

        label="编号"
        width="80%"
        align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shopid"
          label="订单编号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="money"
          label="金额合计"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="delivery"
          label="交货日期"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200%"
          align="center">
          <template v-slot="">

              <el-tooltip  effect="dark" content="选择" placement="top" @click="File">
                  <el-button type="warning" icon="el-icon-thumb" size="12px" circle></el-button>
      </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

    <div class="block">

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryinfo.pagenum"
  :page-sizes="[1, 2, 3, 5,8,10]"
  :page-size="queryinfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  style="margin-top: 20px;">
</el-pagination>

</div>  </template>
    </span>
  </span>
</el-dialog>
    </div>
  </template>
<script>
import axios from 'axios'
export default {
  name: 'PurchasePlan',
  data () {
    return {
      addcontract: false,
      file: false,
      shoporder: false,
      data1: '',
      data2: '',
      data3: '',
      data4: '',
      search: '',
      address: '',
      listtest: [],
      userinfo: [],
      total: 0,
      addDialogVisible: false,
      queryinfo: {
        search: '',
        pagenum: 1,
        pageSize: 5
      },
      addForm: {
      },
      addFormref: {},
      addrules: {
      },
      putusers: false,
      options: [{
        value: '选项1',
        label: '快递'
      }, {
        value: '选项2',
        label: '物流'
      }],
      options1: [{
        value: '选项1',
        label: '未提交'
      }, {
        value: '选项2',
        label: '待审核'
      },
      {
        value: '选项3',
        label: '已审核'
      }],
      options2: [{
        value: '选项1',
        label: '驳回'
      }, {
        value: '选项2',
        label: '通过'
      }],
      value: '',
      phonename: '',
      applyname: '',
      lookstate: '',
      applystate: '',
      lookname: '',
      username: '',
      songtype: '',
      phonetype: '',
      data: ''
    }
  },
  methods: {
    async choose (id) {
      const res = await axios.get('/cart')
      for (const item of res.data.user) {
        if (item.id === id) {
          this.search = item.shopid
          this.value = item.shippedtype
          this.outshop = item.returnsdate
          this.address = item.receiveaddress
          this.data = item.auditordata
          this.phonename = item.phonename
          this.phonetype = item.phonetype
        }
      }
      console.log(this.value)
      this.shoporder = false

      console.log(id)
    },
    Addcontract () {
      this.addcontract = false
      this.$message.success('添加成功！')
    },
    Putcontract () {
      this.putusers = false
      this.$message.success('修改成功！')
    },
    // 获取列表V
    async getUserList () {
      const res = await axios.get('/cart', {
        params:
          this.queryinfo

      })
      this.listtest = res.data.user
      this.total = res.data.total
      console.log(res.data)
    },

    // 获取页码V
    async getPage () {
      const res = await axios.get('/cart')
      this.queryinfo.pagenum = res.data.pagenum
      this.queryinfo.pageSize = res.data.pageSize
      this.getUserList()
    },

    handleSizeChange (newsize) {
      this.queryinfo.pageSize = newsize
    },
    handleCurrentChange (newnum) {
      this.queryinfo.pagenum = newnum
    },
    // 更新用户状态V
    addchear () {
      this.$refs.addFormref.resetFields()
    },

    // 删除数据V
    async del (index) {
      const text = await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除用户！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)

      if (text !== 'confirm') {
        return this.$message.warning('已取消删除！')
      }

      let res = await axios.get('/cart')
      const user = res.data.user
      const deleteIndex = user.findIndex((item) => item.id === index) // 找到要删除用户的索引
      if (deleteIndex === -1) {
        return this.$message.error('找不到要删除的用户！')
      }
      user.splice(deleteIndex, 1) // 根据索引删除用户
      res = await axios.put('/cart', { user, total: res.data.total - 1 }) // 更新购物车数据
      this.getUserList()

      console.log(res)
    },
    // 合同弹窗
    detail () {
      this.putusers = true
    },
    // 订单弹窗
    Shoporder () {
      this.shoporder = true
    },
    // 物料档案弹窗
    File () {
      this.file = true
    },
    // 新建按钮
    add () {
      this.addcontract = true
    },
    // 重置按钮
    refresh () {
      this.value = ''
      this.phonename = ''
      this.applyname = ''
      this.lookstate = ''
      this.applystate = ''
      this.lookname = ''
      this.username = ''
      this.songtype = ''
      this.data1 = ''
      this.data2 = ''
      this.data3 = ''
      this.data4 = ''
      this.queryinfo.search = ''
      this.search = ''
      this.address = ''
      this.phonetype = ''
      this.data = ''
    }
  },
  components: {},
  computed: {
    currentPageData () {
      const start = (this.queryinfo.pagenum - 1) * this.queryinfo.pageSize
      const end = start + this.queryinfo.pageSize
      return this.listtest.slice(start, end)
    }
    // 分页
  },
  mounted () {
    this.getUserList()
  }
}
</script>
  <style lang="less" scoped>
  .underline{
    position: relative;
    right: 142px;
  }
.data{
  margin-top: 12px;
}

.opininp{
  box-sizing: border-box;
  position: relative;
 right: 90px;
  width: 500px;
}
.opinbtu{
  position: relative;
  left: 50px;
 padding-right: 20px;
 top: 20px;
}
.classify{
  position: relative;
  right: 10px;
  width: 93px;
}
  </style>
